import loginLeft from "./login_left.png";
import "./login.less"
import { Button, Form, Input } from "antd";
import HFormItem from "@/components/ant-ext/HFormItem";
import React, { useState ,useEffect} from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import Constant from "@/config/constant";
import Common from "@/api/common-login";
// import { useSearchParams } from "react-router-dom";
import LoginUser from "@/config/user";
import { util } from "@/common/util";

export default function Index() {
    // const [searchParams] = useSearchParams()
    const [form] = Form.useForm()
    // const [captcha, setCaptcha] = useState("")
    const [loading, setLoading] = useState(false)

    // const refreshCaptcha = useHandle(() => {
    //     Common.DoGetCaptcha({
    //         success: (data) => {
    //             setCaptcha(data.base64)
    //         }
    //     })
    // }, [])
    
    if (LoginUser.sync().token) {
        util.toPageNoTrap(Constant.LayoutHome)
    }

    return <>
        <div className="login-container">
            <div className="login-box">
                <div className="login-left">
                    <img src={loginLeft} alt="login" />
                </div>
                <div className="login-form">
                    <div className="login-logo">
                        <span className="logo-text">{Constant.WebsiteName}</span>
                    </div>
                    <Form form={form}
                        name="basic"
                        labelCol={{ span: 5 }}
                        initialValues={{ remember: true }}
                        onFinish={() => {
                            Common.DoLogin({
                                body: form.getFieldsValue(), setLoading, success: (data) => {
                                    const { menus, token, userInfoVo } = data
                                    LoginUser.saveAndFlush({ menu: menus, token, userInfo: userInfoVo })
                                    LoginUser.sync()
                                    if (LoginUser.menu) {
                                        const getMenuList = LoginUser.getMenuList()
                                        const getBtnList = LoginUser.getBtnList()
                                        LoginUser.saveAndFlush({ menuMapping: getMenuList, btnMapping: getBtnList })
                                   
                                   return
                                        setTimeout(() => {
                                            util.toPageNoTrap(Constant.LayoutHome)
                                        }, 1000)
                                    }
                                }
                            })
                        }}
                        size="large"
                        autoComplete="off">
                        <HFormItem rules={[{ required: true, message: '请输入用户名' }]} name={"username"}
                            placeholder={"请输入用户名"}
                            prefix={<UserOutlined />} />
                        <HFormItem rules={[{ required: true, message: '请输入验证码' }]} name={"password"}>
                            <Input.Password autoComplete="new-password" placeholder={"请输入密码"}
                                prefix={<LockOutlined />} />
                        </HFormItem>
                        {/* <HFormItem
                            prefix={<SafetyCertificateOutlined className="site-form-item-icon"/>}
                            name={"captcha"}
                            rules={[{required: true, message: '请输入验证码'}, {len: 5, message: "验证码长度为5"}]}
                            placeholder={"请输入验证码"}
                            addonAfter={<img src={captcha} style={{height: 37, width: 125}}
                                             onClick={refreshCaptcha} alt={"验证码"}/>}/> */}

                        <Button style={{ width: "100%" }} type="primary" htmlType="submit" loading={loading}>
                            登陆
                        </Button>
                    </Form>
                </div>
            </div>
        </div>
    </>
}